import { message } from 'antd';
import styles from './index.less'
import {history} from '@umijs/max';
import Map from '@/components/Map';
import {PageContainer} from '@ant-design/pro-components';
import React, {useMemo, useRef, useState} from 'react';
import {locationLatest} from '@/pages/monitor/center/service'
import VehicleTree from "./components/VehicleTree";
import StreamInfo from '@/pages/monitor/center/components/StreamInfo'
import {TableOutlined} from "@ant-design/icons";

const MonitorMgr = () => {
  const [showTable, setShowTable] = useState(true);
  const [dataSource, setDataSource] = useState([]);
  const [checkedVehicle, setCheckedVehcile] = useState([]);

  const map = useRef(null);
  const AMap = useRef(null);

  const onMapLoaded = (_map, _AMap) => {
    map.current = _map
    AMap.current = _AMap
  };

  const tipInfo = (e) => {
    console.log(e)
    let content = [];
    content.push("<div class=\"map_info_window\">");
    content.push("  <div class=\"card-body\">");
    content.push("    <h2>车牌号</h2>");
    content.push("     <p>");
    content.push("      <span>定位时间:2020-10-10 12:22:00</span>");
    content.push("     </p>");
    content.push("     <p>");
    content.push("      <span>经度: </span>");
    content.push("      <span>纬度: </span>");
    content.push("     </p>");
    content.push("     <p>");
    content.push("      <span>速度: </span>");
    content.push("      <span>方向: </span>");
    content.push("     </p>");
    content.push("     <p>");
    content.push("      <span>里程: </span>");
    content.push("      <span>ACC: </span>");
    content.push("     </p>");
    content.push("  </div>");
    content.push("</div>");
    let infoWindow = new AMap.current.InfoWindow({
      isCustom: true, //使用自定义窗体
      content: content.join(""),
      position: e.lnglat,
      offset: new AMap.current.Pixel(16, -45),
    });
    infoWindow.open(map.current, map.current.getCenter());
  }

  const loadLocation = (treeSelectKeys)=> {
    if(treeSelectKeys != undefined && treeSelectKeys.length > 0){
      let treeSelectKey = treeSelectKeys[0];
      if(isNaN(parseFloat(treeSelectKey))){
        return;
      }

      locationLatest({vehicleId: treeSelectKey}).then(res => {
        if(res){
          const position = new AMap.current.LngLat(res.lng/1000000, res.lat/1000000);
          const marker = new AMap.current.Marker({
            position: position,
            offset: new AMap.current.Pixel(-10, -10),
            icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
            title: "北京",
          });
          marker.setLabel({
            direction:'right',
            offset: new AMap.current.Pixel(10, 0),  //设置文本标注偏移量
            content: "<div class='info'>车辆信息</div>", //设置文本标注内容
          });
          marker.on("click", tipInfo);
          map.current.add(marker);
          map.current.setZoomAndCenter(15, position);
          let r = [...dataSource];
          r.push(res)
          setDataSource(r)
        }else{
          message.warning("当前车辆无位置数据上报");
        }
      })
    }
  }

  const onTreeSelect = (treeSelectKeys, treeSelectNodes) => {
    loadLocation(treeSelectKeys)
  }
  const onTreeCheck = (checkedKeys, checkNode) => {
    setCheckedVehcile(checkedKeys)
  }
  const onTreeRightCheck = (e) => {
    switch(e.cmd){
      case 'cmd004': 
        history.push("/monitor/history-track", {
          state: {vehicleId: e.code}
        });
      break;
    }
  }

  return (
    
    <PageContainer className={styles.pageContainer}>
      <div className={styles.container}>
        <div className={styles.mapWrap}>
          <Map onMapLoaded={onMapLoaded}></Map>
        </div>

        <div className={styles.tree}>
          <VehicleTree
            onTreeSelect={onTreeSelect}
            onTreeCheck={onTreeCheck}
            onTreeRightClick = {onTreeRightCheck}
          />
        </div>
        <div className={styles.bottomInfos} style={{display: showTable ? 'block' : 'none'}}>
          <StreamInfo dataSource={dataSource}/>
        </div>
        <TableOutlined className={styles.tableSwitch} onClick={() => setShowTable(!showTable)}/>
      </div>
    </PageContainer>
  );
}
export default MonitorMgr
